import React from "react";
import WebSocketUtils from "../utils/WebSocketUtils";
import LterMap from "../components/LterScreen/LterMap";

import { Text, ScrollView, View, Alert } from "react-native";
import { Card, WhiteSpace, List } from "@ant-design/react-native";
const Item = List.Item;
const Brief = Item.Brief;

export default class LterScreen extends React.Component {
  ws = new WebSocket(WebSocketUtils.GetAddr());

  constructor(props) {
    super(props);

    this.ResetWebSocket();

    this.state = {
      use_cpu: 0,
      use_memory: 0,
      monitor_up: 0,
      monitor_down: 0,
      server_version: "",
      lter_map: []
    };
  }

  static navigationOptions = {
    title: "系统状态"
  };

  ResetWebSocket() {
    const that = this;

    that.ws = new WebSocket(WebSocketUtils.GetAddr());

    that.ws.onopen = function(event) {
      that.ws.send(
        JSON.stringify({
          action: "hello"
        })
      );
    };

    that.ws.onmessage = function(event) {
      if (event.data != "iamok") {
        //alert(event.data)
        var recv_json = JSON.parse(event.data);
        switch (recv_json.action) {
          case "monitor": {
            that.setState({
              monitor_up: (recv_json.json_value.monitor_up / 1024).toFixed(2),
              monitor_down: (recv_json.json_value.monitor_down / 1024).toFixed(
                2
              )
            });

            break;
          }

          case "lter": {
            that.setState({
              lter_map: recv_json.json_value
            });

            break;
          }

          case "cpu": {
            that.setState({
              use_cpu: recv_json.json_value.UsedPercent.toFixed(2)
            });

            break;
          }

          case "memory": {
            that.setState({
              use_memory: recv_json.json_value.UsedPercent.toFixed(2)
            });

            break;
          }

          case "hello": {
            if (recv_json.json_value.app_version != "1.2.0") {
              Alert.alert(
                "通知消息",
                "您的版本过低，请确认升级！",
                [{ text: "OK", onPress: () => console.log("OK Pressed") }],
                { cancelable: false }
              );
            }

            that.setState({
              server_version: recv_json.json_value.server_version
            });

            break;
          }

          default: {
            break;
          }
        }
      }
    };

    that.ws.onclose = function(event) {
      setTimeout(() => {
        that.ResetWebSocket();
      }, 500);
    };

    that.ws.onerror = function(event) {
      that.ws.close();
    };
  }

  render() {
    return (
      <ScrollView
        style={{ flex: 1, backgroundColor: "#f5f5f9" }}
        automaticallyAdjustContentInsets={false}
        showsHorizontalScrollIndicator={false}
        showsVerticalScrollIndicator={false}
      >
        <List>
          <Item extra={this.state.server_version}>云端版本</Item>
          <Item extra={`${this.state.use_cpu}%`}>CPU使用率</Item>
          <Item extra={`${this.state.use_memory}%`}>内存使用率</Item>
          <Item extra={`${this.state.monitor_up}KB/s`}>上行速率</Item>
          <Item extra={`${this.state.monitor_down}KB/s`}>下行速率</Item>
        </List>

        <LterMap lter_map={this.state.lter_map} />
      </ScrollView>
    );
  }
}
